<template>
  <div>
    <div class="title">热销推荐</div>
    <ul>
      <li class="item border-bottom" >  
          <img src=""  class="item-img" />
        
        <div class="item-info">
          <p class="item-title"></p>
          <p class="item-desc">国家5A景区，天下一名刹</p>
          <button class="item-button">查看详情</button>
        </div>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: "HomeRecommed",
  data() {
    return {
      recommedList:[{
        id:'0001',
        imgUrl:'https://imgs.qunarzz.com/sight/p0/1709/e9/e9b7ae23f567806ea3.img.jpg_200x200_bf985a3d.jpg',
        title:'少林寺',
        desc:'国家5A景区，天下一名刹'
      },{
        id:'0002',
        imgUrl:'https://imgs.qunarzz.com/sight/p0/1709/e9/e9b7ae23f567806ea3.img.jpg_200x200_bf985a3d.jpg',
        title:'少林寺',
        desc:'国家5A景区，天下一名刹'
      },{
        id:'0003',
        imgUrl:'https://imgs.qunarzz.com/sight/p0/1709/e9/e9b7ae23f567806ea3.img.jpg_200x200_bf985a3d.jpg',
        title:'少林寺',
        desc:'国家5A景区，天下一名刹'
      },]
    };
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'

.title
  margin-top: 0.2rem
  line-height: 0.8rem
  background: #eee
  text-indent: 0.2rem
.item
  overflow: hidden
  display: flex
  height: 1.9rem
  // background: red
  .item-img
    width :1.7rem
    height :1.7rem
    padding: .1rem
  .item-info
    flex :1
    padding: .1rem
    min-width :0
    .item-title
      line-height :.54rem
      font-size :.32rem
      ellipsis()

    .item-desc
      line-height :.4rem
      color :#ccc
      ellipsis()

    .item-button
      line-height :.44rem
      margin-top : .16rem
      background :#ff9300
      padding:0 .2rem
      border-radius : .06rem
      color:  #fff


</style>
